<!-- 继承母版 -->
{% extends 'layout/basic.html' %}
<!-- 子板需要再次导入static -->
{% load static %}
<!-- 设置标题 -->
{% block title %}用户注册{% endblock %}

<!-- 设置CSS -->
{% block css %}
    <link rel="stylesheet" href="{% static 'app01/css/register.css' %}">

{% endblock %}


<link rel="stylesheet" href="{% static 'app01/css/register.css' %}">

<!-- 添加body内容 -->
{% block content %}
    <div class="account border-0">
        <div class="title">用户注册</div>
        <form id="form" novalidate method="post">
            {% csrf_token %}
            {% for field in form %}

                {% if field.name == 'code' %}
{#                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>#}
{#                    <div class="row">#}
{#                        <div class="col-md-7">{{ field }}</div>#}
{#                        <div class="col-md-5">#}
{#                            <button type="button" class="btn btn-outline-primary bg-gradient">点击获取验证码</button>#}
{#                        </div>#}
{#                    </div>#}
{#                    <span style="color: red;position:absolute; font-size: 15px;" class="error-msg"></span>#}
{#                    <br>#}
                {% else %}
                    <label for="{{ field.id_for_label }}"><i style="color: red">* </i>{{ field.label }}</label>
                    {{ field }}
                    <span style="color: red;position:absolute; font-size: 15px;" class="error-msg"></span>
                    <br>
                {% endif %}
            {% endfor %}
            <div class="text-center">
                <button id="btn_register" type="button" style="width: 30%"
                        class="btn btn-sm btn-primary mt-4 bg-gradient">注册
                </button>
            </div>

        </form>
    </div>

{% endblock %}

<!-- 添加js -->
{% block js %}
    <script>
        $(function () {
            bindCodeEvent();
            bindRegisterEvent();
        })

        function bindCodeEvent() {
            $('#btn_code').click(function () {
                // 查看手机好控件的id
                var mobiePhone = $('#id_phone_number').val()

                $.ajax({
                    url: '{% url 'app01:code' %}',
                    type: 'get',
                    dataType: 'JSON',
                    data: {
                        phoneNum: mobiePhone,
                    },
                    success: function (res) {
                        if (res.status) {
                            console.log('code');
                        } else {
                            console.log(res)
                            $.each(res.error, function (key, value) {
                                $('#id_' + key).next().text(value[0])
                            })
                        }
                    }
                })
            })

        }

        function bindRegisterEvent() {
            $('#btn_register').click(function () {
                $('.error-msg').empty()
                // 收集数据
                var formData = $('#form').serialize()
                console.log(formData)

                $.ajax({
                    url: '{% url 'app01:register' %}',
                    type: 'post',
                    dataType: 'JSON',
                    data: formData,
                    success: function (res) {
                        if (res.status) {
                            console.log('register')
                            location.href = res.redirect_url;
                        } else {
                            console.log('error-msg')

                            $.each(res.error, function (key, value) {
                                console.log(res.error)
                                $('#id_' + key).next().text(value[0])

                            })
                        }
                    }
                })
            })
        }

    </script>
{% endblock %}

